<template>
  <div>
    <sweet-scrollbar height="800px">

      <div class="infinite-scroll-wrapper">
        <infiniteScroll />
      </div>
      <sweet-input style="width: 200px" v-model="inputVal" v-number-input placeholder="请输入整数"></sweet-input>
      <sweet-input style="width: 200px" v-model="inputVal1" v-number-input.float="{precision: 3}" placeholder="请输入精度为3小数"></sweet-input>
      <sweet-input style="width: 200px" v-model="inputVal2" v-number-input="{max: 60, min: 0}" placeholder="请输入数据,范围[0, 60]"></sweet-input>
      <vDraggable />

      <div class="vResizable-wrap">
        <vResizable />
      </div>

      <div style="width: 500px; height: 30px" v-ellipsis>
        {{ text }}
      </div>

      <br />
      <br />

      <div v-custom-loading="true" style="width: 100px; height: 100px; background: yellow" >
        <div>需要加载的内容</div>
      </div>

    </sweet-scrollbar>
  </div>
</template>
<script>
import infiniteScroll from './directive-components/infinite-scroll.vue';
import vDraggable from './directive-components/v-draggable.vue';
import vResizable from './directive-components/v-resizable.vue';

export default {
  components: { infiniteScroll, vDraggable, vResizable },
  data() {
    return {
      inputVal: '',
      inputVal1: '',
      inputVal2: '',
      text: '这是一个非常长的文本，超过容器宽度时将自动显示省略号，并且鼠标悬停时会显示完整文本内容。超过容器宽度时将自动显示省略号，并且鼠标悬停时会显示完整文本内容。'
    };
  },
}
</script>
<style lang="less" scoped>
.infinite-scroll-wrapper {
  width: 90%;
}
.vResizable-wrap {
  min-height: 400px;
}
</style>
